<template>
  <div class="home">
    <x-header
      :left-options="{backText:''}"
      :right-options="{showMore:true}"
      @on-click-more="showMenus = true"
      style="background-color:#fff;"
    ></x-header>
    <top-nav></top-nav>
    <swiper :list="banners" v-model="bannerIndex" @on-index-change="onBannerIndexChange"></swiper>
    <flexbox>
      <flexbox-item :span="1/4">
        <p class="periods">{{periodicalNum}}</p>
      </flexbox-item>
      <flexbox-item>
        <search
          @result-click="resultClick"
          @on-change="getResult"
          :results="results"
          v-model="value"
          position="absolute"
          auto-scroll-to-top
          @on-focus="onFocus"
          @on-cancel="onCancel"
          @on-submit="onSubmit"
          :auto-fixed="false"
          ref="search"
        ></search>
      </flexbox-item>
    </flexbox>
    <div class="content" :style="{height:cntHeight+'px'}">
      <category-list></category-list>
    </div>
  </div>
</template>

<script>
import { XHeader, Swiper, Search, Flexbox, FlexboxItem } from 'vux'
import CategoryList from '@/components/CategoryList'
import TopNav from '@/components/TopNav'

const baseList = [
  {
    url: 'javascript:',
    img: 'https://ww1.sinaimg.cn/large/663d3650gy1fq66vvsr72j20p00gogo2.jpg',
    title: '送你一朵fua'
  },
  {
    url: 'javascript:',
    img: 'https://ww1.sinaimg.cn/large/663d3650gy1fq66vw1k2wj20p00goq7n.jpg',
    title: '送你一辆车'
  },
  {
    url: 'javascript:',
    img: 'https://static.vux.li/demo/5.jpg', // 404
    title: '送你一次旅行',
    fallbackImg:
        'https://ww1.sinaimg.cn/large/663d3650gy1fq66vw50iwj20ff0aaaci.jpg'
  }
]

export default {
  name: 'home',
  components: {
    XHeader,
    TopNav,
    Swiper,
    Search,
    Flexbox,
    FlexboxItem,
    CategoryList
  },
  data () {
    return {
      banners: baseList,
      bannerIndex: 0,
      results: [],
      value: '',
      // 期刊数
      periodicalNum: '第八期'
    }
  },
  computed: {
    cntHeight () {
      return this.$store.state.clientHeight - 314 - 53
    }
  },
  methods: {
    onBannerIndexChange () {
      console.log(this.bannerIndex)
    },
    setFocus () {
      this.$refs.search.setFocus()
    },
    resultClick (item) {
      window.alert('you click the result item: ' + JSON.stringify(item))
    },
    getResult (val) {
      console.log('on-change', val)
      this.results = val ? this.getResult(this.value) : []
    },
    onSubmit () {
      this.$refs.search.setBlur()
      this.$vux.toast.show({
        type: 'text',
        position: 'top',
        text: 'on submit'
      })
    },
    onFocus () {
      console.log('on focus')
    },
    onCancel () {
      console.log('on cancel')
    }
  },
  mounted () {
    console.log(this.screenHeight)
    console.log(this.$store.state.clientHeight)
  }
}
</script>
<style lang="less" scope>
  .home {
  }
</style>
